<!-- 商品详情 -->
<template>
	<view class="detail-wrap ">
		<!-- 缺省页 -->
		<shopro-empty v-if="showEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods_null.png'" :tipText="showEmptyText"
			btnText="返回上一页" @click="$Router.back()"></shopro-empty>
		<view class="detail_box" v-else>
			<view class="detail-content">
				<!-- 轮播 -->
				<u-swiper :height="750" borderRadius="0" mode="rect" indicator-pos="bottomCenter" autoplay="false"
					:list="goodsInfo.images" @click="onGoodsSwiper"></u-swiper>
				<view class="detail_title">
					<view class="detail_title_name">{{goodsInfo.name}}</view>
					<view class="icon">
						<view class="icon_list colorone">{{goodsInfo.breed_name}}</view>
						<view class="icon_list colortwo">{{goodsInfo.age}}天</view>
						<view class="icon_list2 colorthr">
							<image
								:src="goodsInfo.gender=='公'?`${$IMG_URLT}category_03.png`:`${$IMG_URLT}category_04.png`">
							</image>
						</view>
					</view>
					<view class="text">{{goodsInfo.introduce}}</view>
				</view>
				<view class="detail_titlename">宝贝详情</view>
				<view class="detail_titlenamebox">
					<view class="detail_titlenamebox_list">
						<view class="detail_titlenamebox_list_text">{{goodsInfo.breed_name}}</view>
						<view class="detail_titlenamebox_list_name">品种</view>
					</view>
					<u-line color="#F0F0F0" direction="col" length="72rpx" />
					<view class="detail_titlenamebox_list">
						<view class="detail_titlenamebox_list_text">{{goodsInfo.age}}天</view>
						<view class="detail_titlenamebox_list_name">年龄</view>
					</view>
					<u-line color="#F0F0F0" direction="col" length="72rpx" />
					<view class="detail_titlenamebox_list">
						<view class="detail_titlenamebox_list_text">{{goodsInfo.gender}}</view>
						<view class="detail_titlenamebox_list_name">性别</view>
					</view>
				</view>
				<view class="detail_titlename">图文详情</view>
				<view class="tab-detail u-p-20 u-m-b-10">
					<!-- 详情富文本 -->
					<view class="rich-box ">
						<!-- <u-parse :html="goodsInfo.introduce_image"></u-parse> -->
						<rich-text type="node" user-select="true"
							:nodes="formatRichText(goodsInfo.introduce_image)"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<view class="detalisbottomtianchong"></view>
		<view class="detalisbottom">
			<view class="detalisbottom_btn" v-if="goodsInfo.type==1" @tap="confirmBuy">带我回家</view>
		</view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	import shActivity from './components/sh-activity.vue';
	import shPriceCard from './components/sh-price-card.vue';
	import shServe from './components/sh-serve.vue';
	import shGroupon from './components/sh-groupon.vue';
	import shCoupon from './components/sh-coupon.vue';
	import shComment from './components/sh-comment.vue';
	import share from '@/shopro/share';
	import {
		formatRichText
	} from '@/shopro/utils/auth.js';
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {
			shServe,
			shPriceCard,
			shGroupon,
			shCoupon,
			shComment,
			shActivity
		},
		data() {
			return {
				// navbar
				backIconName: 'arrow-left',
				formatRichText: formatRichText,
				showSku: false, //是否显示规格弹窗
				currentSkuText: '', //选中规格
				detailType: '',
				showShare: false,
				buyType: 'sku',
				grouponBuyType: 'alone', //拼团购买方式。
				showEmpty: false,
				showEmptyText: '',
				showServe: false,
				goodsInfo: {},
				commentList: [], //商品评价列表
				commentNum: 0, //商品评价总数
				favorite: false,
				activityRules: {},
				currentSkuList: [],
				confirmGoodsInfo: {},
				swiperCurrent: 0, //轮播下标
				tabCurrent: 'tab0',
				tabList: [{
						id: 'tab0',
						title: '商品详情'
					},
					{
						id: 'tab1',
						title: '规格参数'
					},
					{
						id: 'tab2',
						title: '用户评价'
					}
				]
			};
		},
		// 是否登录
		computed: {
			...mapGetters(['isLogin', 'authType']),
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 48;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height;
				// #endif
			}
		},
		async onLoad() {
			let that = this;
			// this.backIconName = getCurrentPages().length > 1 ? 'arrow-left' : 'home-fill';
			// const type = this.$Route.query.type;
			// this.detailType = type;
			// switch (type) {
			// 	case 'score':
			// 		await this.getScoreDetail();
			// 		break;
			// 	default:
			// 		await this.getGoodsDetail();
			// }
			await this.getGoodsDetail();
		},

		onUnload() {
			share.setShareInfo();
		},

		methods: {
			// goBack
			// 微信直播商品跳转详情，需要用小程序原生接口才能返回。
			goBack() {
				let pageList = getCurrentPages();
				if (pageList.length > 1) {
					// #ifdef MP-WEIXIN
					wx.navigateBack();
					// #endif
					// #ifndef MP-WEIXIN
					uni.navigateBack();
					// #endif
				} else {
					this.$Router.replaceAll('/pages/index/index');
				}
			},
			confirmBuy() {
				let that = this;
				console.log(123, that.goodsInfo)
				that.jump('/pages/order/confirmtwo', {
					goodsList: JSON.stringify(that.goodsInfo),
					from: 'goods'
				});
			},
			// 轮播图预览
			onGoodsSwiper(e) {
				console.log(this.goodsInfo.images)
				let urls = this.goodsInfo.images
				uni.previewImage({
					urls:urls,
					current: 0,
					loop:false
				})
			},
			getActivityRules(e) {
				if (e) {
					this.activityRules = JSON.parse(e);
				}
			},
			// 检测
			checkActivity(data, type) {
				if (data) {
					return !data.includes(type);
				}
				return true;
			},
			// 路由跳转
			jump(path, parmas) {
				console.log(2222)
				console.log(path)
				console.log(parmas)
				this.showShare = false;
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// 回到首页
			goHome() {
				this.$Router.replaceAll('/pages/index/index');
			},

			// 选项卡
			onTab(id) {
				this.tabCurrent = id;
			},
			// 积分详情
			getScoreDetail() {
				let that = this;
				return new Promise((resolve, reject) => {
					that.$http('goods.scoreDetail', {
						id: that.$Route.query.id
					}).then(res => {
						if (res.code === 1) {
							that.goodsInfo = res.data;
							resolve(res.data);
						}
						if (res.code == 0) {
							resolve(false);
							that.$u.toast(res.msg);
						}
					});
				});
			},
			// 商品详情
			getGoodsDetail() {
				let that = this;
				return new Promise((resolve, reject) => {
					that.$http(
						'goods.catDetails', {
							id: that.$Route.query.id
						},
						'',
						false
					).then(res => {
						if (res.code === 1) {
							that.showEmpty = false;
							that.goodsInfo = res.data;
							console.log(that.goodsInfo)
							if (that.goodsInfo.activity_type) {
								that.activityRules.status = that.goodsInfo.activity.status_code;
							}
							share.setShareInfo({
								title: that.goodsInfo.title,
								desc: that.goodsInfo.subtitle,
								image: that.goodsInfo.image,
								params: {
									page: 2,
									pageId: that.$Route.query.id
								}
							});
							// that.getCommentList();
							resolve(res.data);
						} else {
							resolve(false);
							// that.$u.toast(res.msg);
							that.showEmpty = true;
							that.showEmptyText = res.msg;
						}
					});
				});
			},
			// 商品评论
			getCommentList() {
				let that = this;
				that.$http('goods.commentList', {
					goods_id: that.goodsInfo.id,
					per_page: 3,
					type: 'all'
				}).then(res => {
					if (res.code === 1) {
						that.commentList = res.data.data;
						that.commentNum = res.data.total;
					}
				});
			},
			// 组件返回的type;
			changeType(e) {
				this.buyType = e;
			},
			// 组件返回的规格;
			getSkuText(e) {
				this.currentSkuText = e;
			},
			// 分享
			onShare() {
				this.showShare = true;
			},
			// 加入购物车
			addCart() {
				if (this.isLogin) {
					this.buyType = 'cart';
					this.showSku = true;
				} else {
					this.$store.dispatch('showAuthModal');
				}
			},
			// 立即购买
			goPay() {
				if (this.isLogin) {
					this.buyType = 'buy';
					this.showSku = true;
				} else {
					this.$store.dispatch('showAuthModal');
				}
			},
			// 拼团购买
			payGroupon(type) {
				if (this.isLogin) {
					if (type === 'groupon') {
						this.grouponBuyType = 'groupon';
					} else {
						this.grouponBuyType = 'alone';
					}
					this.buyType = 'buy';
					this.showSku = true;
				} else {
					this.$store.dispatch('showAuthModal');
				}
			},

			// 立即秒杀
			goSeckill() {
				!this.isLogin ? this.$store.dispatch('showAuthModal') : (this.showSku = true);
				this.buyType = 'buy';
			},

			// 收藏
			onFavorite(goodsId) {
				let that = this;
				that.$http('goods.favorite', {
					goods_id: goodsId
				}).then(res => {
					if (res.code === 1) {
						that.goodsInfo.favorite = res.data;
						that.$u.toast(res.msg);
					}
				});
			}
		}
	};
</script>
<style lang="scss">
	body {
		background: #F8F8F8;
	}

	.detail_title {
		position: relative;
		width: 702rpx;
		padding: 40rpx 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		margin-top: -63rpx;
		z-index: 99;

		.detail_title_name {
			font-size: 36rpx;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #111111;
		}

		.icon {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.icon_list {
				height: 42rpx;
				padding: 0 12rpx;
				line-height: 42rpx;
				font-size: 24rpx;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				margin-right: 10rpx;
			}

			.icon_list2 {
				height: 42rpx;
				padding: 0 8rpx;
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.colorone {
				color: #F69B0E;
				background: rgba(251, 176, 59, 0.12);
			}

			.colortwo {
				color: #E60000;
				background: rgba(230, 0, 0, 0.09);
			}

			.colorthr {
				color: #F69B0E;
				background: rgba(83, 0, 230, 0.09);
			}

		}

		.text {
			margin-top: 18rpx;
			font-size: 28rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #555555;
			line-height: 36rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}

	.detail_titlename {
		font-size: 36rpx;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 600;
		color: #111111;
		margin-left: 24rpx;
		margin-top: 48rpx;

	}

	.detail_titlenamebox {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 702rpx;
		background: #fff;
		margin: 0 auto;
		padding: 40rpx 0;
		margin-top: 24rpx;

		.detail_titlenamebox_list {
			width: 218rpx;

			.detail_titlenamebox_list_text {
				font-size: 32rpx;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				color: #111111;
				text-align: center;
			}

			.detail_titlenamebox_list_name {
				font-size: 28rpx;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				color: #666666;
				text-align: center;
				margin-top: 28rpx;
			}
		}
	}

	.detalisbottomtianchong {
		height: 156rpx;
	}

	.detalisbottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 156rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: center;

		.detalisbottom_btn {
			width: 702rpx;
			height: 92rpx;
			background: #FBB03B;
			border-radius: 46rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 600;
			color: #111111;
			line-height: 92rpx;
			margin-top: 16rpx;
		}
	}

	// 标题栏
	.nav-box {
		position: fixed;
		width: 100%;
		min-height: 140rpx;
		z-index: 888;
		top: 0;

		.back-box {
			background-color: rgba(#000, 0.18);
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-top: 14rpx;
		}

		.back-hover {
			background-color: rgba(#fff, 0.18);
		}

		.state-hack {
			width: 100%;
			height: var(--status-bar-height);
			/* #ifdef H5 */
			height: 20rpx;
			/* #endif */
		}
	}

	// 拼团玩法
	.groupon-play {
		background: #fff;
		line-height: 94rpx;

		.title {
			font-size: 28rpx;
			color: #999;
		}

		.description {
			font-size: 28rpx;
			width: 500rpx;
			margin-left: 30rpx;
		}
	}

	// 选项卡
	.tab-box {
		height: 102rpx;
		background: #fff;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.8);
		margin-top: 10rpx;

		.tab-item {
			flex: 1;
			height: 100%;
			position: relative;
			font-size: 30rpx;
			font-weight: bold;

			.tab-line {
				width: 123rpx;
				height: 4rpx;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				background: transparent;
				position: absolute;
				z-index: 2;
			}

			.line-active {
				background: rgba(168, 112, 13, 1);
			}
		}
	}

	// 选项卡内容
	.tab-detail {
		min-height: 300rpx;

		// 规格参数
		.goods-size {
			.table-box {
				width: 710rpx;
				margin: auto;
				background: rgba(255, 255, 255, 1);
				border: 1rpx solid rgba(223, 223, 223, 1);

				.t-tr {
					border-bottom: 1rpx solid rgba(223, 223, 223, 1);

					&:last-child {
						border-bottom: none;
					}

					.t-head {
						font-size: 26rpx;
						color: #999;
						flex: 1;
						padding: 15rpx 20rpx;
						height: 100%;
					}

					.t-detail {
						font-size: 26rpx;
						border-left: 1rpx solid rgba(223, 223, 223, 1);
						flex: 4;
						padding: 15rpx 20rpx;
						height: 100%;
					}
				}
			}
		}

		// 富文本
		.rich-box {
			// /deep/ img {
			// 	display: block;
			// 	width:100%;
			// }
		}

		// 评论
		.goods-comment {
			.more-box {
				height: 100rpx;
				background: #fff;

				.more-btn {
					width: 200rpx;
					line-height: 60rpx;
					border: 1rpx solid rgba(213, 166, 90, 1);
					border-radius: 30rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(168, 112, 13, 1);
					padding: 0;
					background: #fff;
				}
			}
		}
	}

	// 规格卡片
	.sku-box {
		line-height: 82rpx;
		background: #fff;
		padding: 0 20rpx;
		margin: 10rpx 0;
		font-size: 28rpx;

		.title {
			color: #999;
			margin-right: 20rpx;
		}
	}

	// 标题卡片
	.title-box {
		background-color: #fff;

		.goods-title {
			font-size: 28rpx;
			font-weight: 600;
			line-height: 42rpx;
		}

		.sub-title {
			color: #a8700d;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 42rpx;
		}
	}

	// 底部工具栏
	.tabbar-foot {
		min-height: 100rpx;
		width: 100%;
	}

	.detail-foot_box {
		min-height: calc(100rpx + env(safe-area-inset-bottom));
		border-top: 1rpx solid rgba(238, 238, 238, 1);
		background-color: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999;

		.left,
		.detail-right {
			flex: 1;
		}

		.tools-item {
			flex: 1;
			height: 100%;

			.tool-img {
				width: 46rpx;
				height: 46rpx;
			}

			.tool-title {
				font-size: 22rpx;
				line-height: 22rpx;
				padding-top: 8rpx;
			}
		}

		.detail-btn-box {
			flex: 1;

			.tool-btn {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(#fff, 0.9);
				width: 210rpx;
				min-height: 70rpx;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.price {
					font-size: 24rpx;
					line-height: 24rpx;
					font-weight: bold;
					color: rgba(#fff, 0.9);
				}

				.price-title {
					font-size: 20rpx;
					line-height: 20rpx;
					font-weight: 500;
					color: rgba(#fff, 0.9);
					padding-top: 8rpx;
				}
			}

			.add-btn {
				box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
				background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
			}

			.pay-btn {
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			}

			.score-btn {
				width: 600rpx;
				line-height: 80rpx;
				background: linear-gradient(90deg, rgba(49, 133, 243, 1), rgba(80, 205, 242, 1));
				box-shadow: 0px 7px 6px 0px rgba(80, 205, 242, 0.2);
				border-radius: 40rpx;
				font-size: 30rpx;

				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				margin-right: 20rpx;
			}

			.seckill-btn {
				width: 432rpx;
				line-height: 70rpx;
				background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
				font-size: 28rpx;

				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}

			.seckilled-btn {
				width: 432rpx;
				line-height: 70rpx;
				background: rgba(221, 221, 221, 1);
				font-size: 28rpx;

				font-weight: 500;
				color: #999999;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}

			.groupon-btn {
				width: 210rpx;
				height: 70rpx;
				background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22);
				border-radius: 35rpx;
			}
		}
	}
</style>